<template>
    <div class="wrapper">
        <div class="newsType">
            <div class="title">
                <i class="el-icon-link"></i> &nbsp;网站导航
            </div>
            <div class="more cursor">
            </div>
        </div>
        <div class="jump-link">
            <a class="website" target="_blank" href="">
                <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;中国消防信息网
            </a>
            <div class="main">
                <div class="website" @mouseenter="showCities = true, showTotal = false">
                    <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;河南消防信息网
                </div>
                <div class="city" :style="{ display: showCities ? 'flex' : 'none' }">
                    <div v-for="city1 in cities1" :key="city1" @click="openLink(cities1Links[city1])">
                        {{ city1 }}&nbsp;&nbsp;|
                    </div>
                </div>
            </div>

            <div class="main">
                <div class="website" @mouseenter="showTotal = true, showCities = false">
                    <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;总队级网站
                </div>
                <div class="city" :style="{ display: showTotal ? 'flex' : 'none' }">
                    <div v-for="city2 in cities2" :key="city2" @click="openLink(cities2Links[city2])">
                        {{ city2 }}&nbsp;&nbsp;|
                    </div>
                </div>
            </div>
            <a class="website" target="_blank" href="">
                <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;内部网页
            </a>
            <a class="website" target="_blank" href="">
                <i class="el-icon-s-promotion"></i>&nbsp;&nbsp;其他网站
            </a>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showCities: false,
            showTotal: false,
            cities1: ['郑州', '开封', '洛阳', '信阳', '新乡', '安阳', '焦作', '南阳', '濮阳', '鹤壁', '漯河', '济源', '商丘', '周口', '驻马店', '平顶山', '三门峡', '航空港'],
            cities2: ['北京', '天津', '河北', '山西', '辽宁', '吉林', '上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南',
                '广东', '广西', '海南', '重庆', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '内蒙古', '黑龙江'],
            cities1Links: { // 对应的链接  
                '郑州': 'https://www.example.com/city1',
                '开封': 'https://www.example.com/city2',
                '洛阳': 'https://www.example.com/city2',
                '信阳': 'https://www.example.com/city2',
                '新乡': 'https://www.example.com/city2',
                '安阳': 'https://www.example.com/city2',
                '焦作': 'https://www.example.com/city2',
                '南阳': 'https://www.example.com/city2',
                '濮阳': 'https://www.example.com/city2',
                '鹤壁': 'https://www.example.com/city2',
                '漯河': 'https://www.example.com/city2',
                '济源': 'https://www.example.com/city2',
                '商丘': 'https://www.example.com/city2',
                '周口': 'https://www.example.com/city2',
                '驻马店': 'https://www.example.com/city2',
                '平顶山': 'https://www.example.com/city2',
                '三门峡': 'https://www.example.com/city2',
                '航空港': 'https://www.example.com/city2',
            },
            cities2Links: { // 对应的链接  
                '北京': 'https://www.example.com/cityA',
                '天津': 'https://www.example.com/cityB',
                '河北': 'https://www.example.com/cityB',
                '山西': 'https://www.example.com/cityB',
                '辽宁': 'https://www.example.com/cityB',
                '吉林': 'https://www.example.com/cityB',
                '上海': 'https://www.example.com/cityB',
                '江苏': 'https://www.example.com/cityB',
                '浙江': 'https://www.example.com/cityB',
                '安徽': 'https://www.example.com/cityB',
                '福建': 'https://www.example.com/cityB',
                '江西': 'https://www.example.com/cityB',
                '山东': 'https://www.example.com/cityB',
                '河南': 'https://www.example.com/cityB',
                '湖北': 'https://www.example.com/cityB',
                '湖南': 'https://www.example.com/cityB',
                '广东': 'https://www.example.com/cityB',
                '广西': 'https://www.example.com/cityB',
                '海南': 'https://www.example.com/cityB',
                '重庆': 'https://www.example.com/cityB',
                '四川': 'https://www.example.com/cityB',
                '贵州': 'https://www.example.com/cityB',
                '云南': 'https://www.example.com/cityB',
                '西藏': 'https://www.example.com/cityB',
                '陕西': 'https://www.example.com/cityB',
                '甘肃': 'https://www.example.com/cityB',
                '青海': 'https://www.example.com/cityB',
                '宁夏': 'https://www.example.com/cityB',
                '新疆': 'https://www.example.com/cityB',
                '内蒙古': 'https://www.example.com/cityB',
                '黑龙江': 'https://www.example.com/cityB',
            },
        };
    },
    methods: {
        openLink(url) {
            if (url) {
                window.open(url, '_blank');
            }
        },
    },
};
</script>

<style scoped lang="less">
.wrapper {
    padding-top: 8px;
}

.newsType {
    display: flex;
    justify-content: space-between;
    /*border: red 1px solid;*/
}

.title {
    font-size: 20px;
    color: #2275a1;
    white-space: nowrap;
    border-bottom: 3px solid #2275a1;
}

.more {
    width: 100%;
    justify-content: right;
    border-bottom: 3px solid rgb(123, 134, 141);
}

.jump-link {
    font-size: 16px;
    justify-content: space-between;
    padding-top: 10px;
}

.jump-link .main {
    display: block;
}

.jump-link .website {
    min-width: 200px;
    text-decoration: none;
    cursor: pointer;
    height: 40px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    background-color: #0a7ebb;
    /* 河南消防信息网的背景色 */
    color: white;
    border-radius: 3px;
    margin-bottom: 5px;
}

.jump-link .city {
    margin-top: 5px;
    flex-wrap: wrap;
    display: flex;
    // border: solid 1px #A9A9A9;
    left: 0;
    /* 定位到左边界 */
    right: 0;

    /* 定位到右边界 */
    div {
        margin: 8px;
        text-align: center;
        justify-content: center;
        cursor: pointer;
        align-items: center;
        box-sizing: border-box;
        background-color: white;
        /* 城市的背景色 */
        color: #808080;

    }
}
</style>